<template>
  <div>
    <el-page-header @back="handleBack" content="添加信息"></el-page-header>
    <el-row>
      <el-col :span="8">
        <el-form
          :model="addForm"
          label-width="auto"
          ref="addForm"
          :rules="rules"
        >
          <el-form-item prop="DeviceName" label="设备">
            <el-input
              placeholder="请输入"
              clearable
              v-model.number="addForm.DeviceName"
            ></el-input>
          </el-form-item>
          <el-form-item prop="state" label="状态">
            <el-input
              placeholder="请输入"
              clearable
              v-model.trim="addForm.state"
            ></el-input>
          </el-form-item>
          <el-form-item prop="PurchaseDate" label="日期">
            <div class="block">
              <el-date-picker
                v-model="addForm.PurchaseDate"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </div>
            <!-- <el-input
              placeholder="请输入"
              clearable
              v-model.trim="addForm.PurchaseDate"
            ></el-input> -->
          </el-form-item>
          <el-form-item prop="money" label="金额">
            <el-input
              placeholder="请输入"
              clearable
              v-model.trim="addForm.money"
            ></el-input>
          </el-form-item>
          <el-form-item prop="num" label="数量">
            <el-input
              placeholder="请输入"
              clearable
              v-model.trim="addForm.num"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :loading="subLoading" @click="handleAdd" type="primary"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      addForm: {
        PurchaseDate:new Date()
      },
      subLoading: false,
      rules: {
        money: [
          {
            required: true,
            message: "金额不可以为空",
          },
        ],
        DeviceName: [
          {
            required: true,
            message: "设备名称不可以为空",
          },
        ],
        state: [
          {
            required: true,
            message: "状态不可以为空",
          },
        ],
        num: [
          {
            required: true,
            message: "数量不可以为空",
          },
        ],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  computed: {
    ...mapState("pmModel", ["PMList"]),
    formatTime() {
      return function(time) {
        let d = new Date(time);
        return `${d.getFullYear()}-${d.getMonth() +
          1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
      };
    },
  },
  methods: {
    ...mapActions("pmModel", ["getUsersList"]),
    handleBack() {
      this.$router.history.go(-1);
    },
    async handleAdd() {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          const { data: result } = await this.$http.post(
            "addEquipments",
            this.addForm
          );
          if (result.errorCode < 0) {
            alert("添加失败");
          } else {
            this.subLoading = true;
            alert("添加成功");
            this.subLoading = false;
            this.handleBack();
          }
        } else {
          alert("添加失败");
          return false;
        }
      });
    },
  },
};
</script>

<style>
.el-page-header {
  margin: 5%;
}
.el-date-picker {
  width: 345px;
}

</style>
